<template>
    <div id="scoreImport">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/physicalScore' }">体测成绩</el-breadcrumb-item>
            <el-breadcrumb-item>导入成绩</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div class="list_head">
                <span class="head_name">导入成绩</span>
                <el-button class="list_btn" type="primary" @click="cancel()">返回</el-button>
            </div>
            <div id="sec_1">
                <p>1、下载成绩导入模板，批量录入学生成绩</p>

                <a href="https://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/jlp-import/primaryImport.xlsx" class="mylink mylink-p20">
                    <i class="el-icon-printer blueIcon"></i> 小学体测模板下载</a>
                <a href="https://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/jlp-import/hightImport.xlsx" class="mylink">
                    <i class="el-icon-printer blueIcon"></i> 中学体测模板下载</a>
            </div>
            <div class="sec_2">
                <div class="marbot">2、填写学校和体测信息，导入填写好的学生成绩文件</div>
                <el-row :gutter="10" class="marbot">
                    <el-col :span="12">
                        <div class="select-lable">学校：</div>
                    </el-col>
                    <el-col :span="12" class="select-valued">
                        <el-select v-if="user.userType == 0" v-model="schoolId" class="myselect" placeholder="请选择学校" filterable clearable>
                            <el-option v-for='item in schoolList' :label='item.schoolName' :value='item.schoolId' :key="item.schoolId"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row :gutter="10" class="marbot">
                    <el-col :span="12">
                        <div class="select-lable">体测：</div>
                    </el-col>
                    <el-col :span="12" class="select-valued">
                        <el-select v-model="physicalId" class="myselect" placeholder="请选择体测">
                            <el-option v-for='item in physicalList' :label='item.physicalName' :value='item.physicalId' :key="item.physicalId"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row :gutter="10" class="marbot">
                    <el-col :span="12">
                        <div class="select-lable">选择文件：</div>
                    </el-col>
                    <el-col :span="12" class="select-valued">
                        <el-upload :action="actionUrl" :on-success="handleSuccess" :on-error="handleError" :disabled="!isHavePhysicalId" name="uploadFile"
                            :headers="headers" :show-file-list='false' class="mybtn">
                            <el-button type="primary" :disabled="!isHavePhysicalId">选择文件</el-button>
                        </el-upload>
                    </el-col>
                </el-row>
            </div>
            <el-row :gutter="20" type="flex" justify="space-around">
                <el-col :span="11">
                    <span style="line-height:50px;">民族代码查询表</span>
                    <el-table :data="nationalCode" border :highlight-current-row="true">
                        <el-table-column prop="code1" label="编码"></el-table-column>
                        <el-table-column prop="name1" label="名称"></el-table-column>
                        <el-table-column prop="code" label="编码"></el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="11">
                    <span style="line-height:50px;">年级编号查询表</span>
                    <el-table :data="classCode" border :highlight-current-row="true" :span-method="objectSpanMethod">
                        <el-table-column type="index" label="序号" width="60"></el-table-column>
                        <el-table-column prop="schoolLevel" align='center' label="学校"></el-table-column>
                        <el-table-column prop="gradeName" label="年级"></el-table-column>
                        <el-table-column prop="gradeCode" label="编码"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                physicalList: [],
                physicalId: "",
                schoolId: '',
                schoolList: [],
                actionUrl: this.$util.domain + "/jlp/physical/importscore",
                headers: {},
                isHavePhysicalId: false,
                classCode: [
                    { gradeCode: '11', schoolLevel: '小学', gradeName: '一年级' },
                    { gradeCode: '12', schoolLevel: '小学', gradeName: '二年级' },
                    { gradeCode: '13', schoolLevel: '小学', gradeName: '三年级' },
                    { gradeCode: '14', schoolLevel: '小学', gradeName: '四年级' },
                    { gradeCode: '15', schoolLevel: '小学', gradeName: '五年级' },
                    { gradeCode: '16', schoolLevel: '小学', gradeName: '六年级' },
                    { gradeCode: '21', schoolLevel: '初中', gradeName: '初一' },
                    { gradeCode: '22', schoolLevel: '初中', gradeName: '初二' },
                    { gradeCode: '23', schoolLevel: '初中', gradeName: '初三' },
                    { gradeCode: '31', schoolLevel: '高中', gradeName: '高一' },
                    { gradeCode: '32', schoolLevel: '高中', gradeName: '高二' },
                    { gradeCode: '33', schoolLevel: '高中', gradeName: '高三' },
                    { gradeCode: '41', schoolLevel: '大学', gradeName: '大一' },
                    { gradeCode: '42', schoolLevel: '大学', gradeName: '大二' },
                    { gradeCode: '43', schoolLevel: '大学', gradeName: '大三' },
                    { gradeCode: '44', schoolLevel: '大学', gradeName: '大四' },
                ],
                nationalCode: [
                    { code1: "01", name1: "汉族", code: "30", name: "土族" },
                    { code1: "02", name1: "蒙古族", code: "31", name: "达斡尔族" },
                    { code1: "03", name1: "回族", code: "32", name: "仫佬族" },
                    { code1: "04", name1: "藏族", code: "33", name: "羌族" },
                    { code1: "05", name1: "维吾尔族", code: "34", name: "布朗族" },
                    { code1: "06", name1: "苗族", code: "35", name: "撒拉族" },
                    { code1: "07", name1: "彝族", code: "36", name: "毛南族" },
                    { code1: "08", name1: "壮族", code: "37", name: "仡佬族" },
                    { code1: "09", name1: "布依族", code: "38", name: "锡伯族" },
                    { code1: "10", name1: "朝鲜族", code: "39", name: "阿昌族" },
                    { code1: "11", name1: "满族", code: "40", name: "普米族" },
                    { code1: "12", name1: "侗族", code: "41", name: "塔吉克族" },
                    { code1: "13", name1: "瑶族", code: "42", name: "怒族" },
                    { code1: "14", name1: "白族", code: "43", name: "乌孜别克族" },
                    { code1: "15", name1: "土家族", code: "44", name: "俄罗斯族" },
                    { code1: "16", name1: "哈尼族", code: "45", name: "鄂温克族" },
                    { code1: "17", name1: "哈萨克族", code: "46", name: "德昂族" },
                    { code1: "18", name1: "傣族", code: "47", name: "保安族" },
                    { code1: "19", name1: "黎族", code: "48", name: "裕固族" },
                    { code1: "20", name1: "傈僳族", code: "49", name: "京族" },
                    { code1: "21", name1: "佤族", code: "50", name: "塔塔尔族" },
                    { code1: "22", name1: "畲族", code: "51", name: "独龙族" },
                    { code1: "23", name1: "高山族", code: "52", name: "鄂伦春族" },
                    { code1: "24", name1: "拉祜族", code: "53", name: "赫哲族" },
                    { code1: "25", name1: "水族", code: "54", name: "门巴族" },
                    { code1: "26", name1: "东乡族", code: "55", name: "珞巴族" },
                    { code1: "27", name1: "纳西族", code: "56", name: "基诺族" },
                    { code1: "28", name1: "景颇族", code: "57", name: "其他" },
                    { code1: "29", name1: "柯尔克孜族", code: "58", name: "外国血统" },
                ]
            };
        },
        watch: {
            schoolId() {
                this.physicalId = '';
                this.getSchoolPhyList();
            },
            physicalId() {
                this.actionUrl = this.$util.domain + "/jlp/physical/importscore?physicalId=" + this.physicalId + '&schoolId=' + this.schoolId;
            }
        },
        mounted() {
            this.getSchoolList()
            // this.getSchoolPhyList();
        },
        computed: mapState({ user: state => state.user }),
        //返回
        methods: {
            cancel() {
                let params = {
                    // grade: this.$util.getUrlParam("grade"),
                    // schoolId: this.$util.getUrlParam("schoolId"),
                    // pageNum: this.$util.getUrlParam("pageNum"),
                    // classCode: this.$util.getUrlParam("classCode"),
                    // physicalId: this.$util.getUrlParam("physicalId"),
                }
                this.$util.refreshTo('/#/physicalScore', params);
            },
            //获取学校列表
            getSchoolList() {
                this.schoolList = [];
                this.$util.getSchools().then(schools => {
                    schools.forEach(item => {
                        this.schoolList.push({
                            schoolName: item.name,
                            schoolId: item.schoolId
                        })
                    });
                })
            },

            // 获取体测列表
            getSchoolPhyList() {
                this.physicalList = [];

                this.$axios.post('/jlp/physical/school/participate/list', {
                    schoolId: this.schoolId
                }).then(res => {
                    if (res.data.error == 10000) {
                        let arrData = res.data.data;
                        if (arrData && arrData.length) {
                            arrData.forEach(item => {
                                this.physicalList.push({
                                    physicalId: item.physicalId + '',
                                    physicalName: item.physicalName
                                })
                            })
                            this.isHavePhysicalId = true;
                            this.physicalId = this.physicalList[0].physicalId
                        }
                    }
                })
            },
            handleSuccess(response) {
                if (response.error !== 10000) {
                    if (response.error == -10000) {
                        this.$util.errorMsg("服务器开小差");
                    } else {
                        this.$util.errorMsg(response.message);
                    }
                } else {
                    this.$util.successMsg("文件上传成功");

                    let params = {
                        importId: response.data,
                        physicalId: this.physicalId
                    }
                    this.$util.refreshTo("/#/scoreImportResult", params);
                }
            },
            handleError(response) {
                if (response.status === 403) {
                    this.SIGNOUT();
                    location.href = "/login";
                }
                this.$util.errorMsg("文件上传失败");
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 1) {
                    if (rowIndex == 0) {
                        return {
                            rowspan: 6,
                            colspan: 1
                        };
                    } else if (rowIndex == 6) {
                        return {
                            rowspan: 3,
                            colspan: 1
                        };
                    } else if (rowIndex == 9) {
                        return {
                            rowspan: 3,
                            colspan: 1
                        };
                    } else if (rowIndex == 12) {
                        return {
                            rowspan: 4,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
        }
    };
</script>

<style>
    #scoreImport #sec_1 {
        width: 70%;
        margin-left: 15%;
        height: 100px;
        text-align: center;
        line-height: 30px;
        padding-top: 20px;
        color: #333333;
        border: solid 1px #b2b2b2;
    }

    #scoreImport .sec_2 {
        width: 70%;
        margin-left: 15%;
        padding-top: 15px;
        text-align: center;
        color: #333333;
        border: solid 1px #b2b2b2;
        margin-top: 40px;
    }

    #scoreImport #step2 {
        color: #333333;
        margin-top: 10px;
        height: 40px;
        padding-right: 134px;
        line-height: 40px;
    }

    #scoreImport #step2 .mybtn {
        display: inline-block;
        width: 100px;
        height: 40px;
        vertical-align: middle;
    }

    #scoreImport #step2 .el-upload--text {
        border: 0px;
        width: 100px;
        height: 40px;
    }

    #scoreImport #step2 .el-button {
        border-radius: 0px;
    }

    #scoreImport #sec_1 .mylink {
        color: #0398ff;
        line-height: 24px;
        text-decoration: none;
    }

    #scoreImport #sec_1 .mylink-p20 {
        margin-right: 20px;
    }

    #scoreImport .select-lable {
        text-align: right;
        line-height: 40px;
    }

    #scoreImport .select-valued {
        text-align: left;
    }

    #scoreImport .marbot {
        margin-bottom: 10px;
    }
</style>